<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>数据详情</title>
</head>
<style>
    * {
        margin: 0;
        padding: 0;
    }

    html,
    body {
        height: 100%;
        width: 100%;
        padding: 0px;
        margin: 0px;
    }

    .clearfix:after {
        content: "";
        display: block;
        height: 0;
        clear: both;
        visibility: hidden;
    }

    .clearfix {
        /* 触发 hasLayout */
        zoom: 1;
    }

    .user {
        width: 100%;
        height: 100%;
        background: #052B58;
    }

    .hander {
        height: 35px;
        padding: 8px 5px 0px 34px;
    }

    .hander_size {
        font-size: 25px;
        line-height: 35px;
        color: #E6A250;
        font-weight: bold;
    }

    .hande_close {
        font-size: 22px;
        padding: 10px;
        color: #fff;
        float: right;
        margin-right: 33px;
        cursor: pointer;
    }

    .contant {
        padding: 5px 5px 5px 30px;
    }

    ul>li {
        height: 40px;
        line-height: 40px;
        width: 30%;
        border: 1px solid #037CB3;
        float: left;
        list-style: none;
        margin: 5px;
        padding: 5px;
        background-color: #043DA4;
    }

    li>b {
        color: #01DAEB;
        font-weight: 600;
    }

    li>span {
        color: #fff;
        margin-left: 10px;
    }

    .notes {
        width: 100%;
        margin: 7px;
    }

    .notes>p {
        color: #01DAEB;
        font-size: 20px;
    }

    .notes>textarea {
        background-color: #05225C;
        border: 1px solid #062B70;
        color: #fff;
    }
</style>

<body onload="csj()">
    <!-- 房屋详情 -->
    <div class="user">
        <div class="hander">
            <span class="hander_size">数据详情</span>
            <span class="hande_close">x</span>
        </div>
        <div class="contant">
            <ul class="clearfix" id="ui">
                <!--                <li><b>房屋名称</b><span>花园小区</span></li>
                <li><b>建造时间</b><span>17.11.21</span></li>
                <li><b>所在地区</b><span>沙埋坝</span></li>
                <li><b>建造单位</b><span>北京一建</span></li>
                <li><b>管理单位</b><span>梦园集团</span></li>
                <li><b>维护部门</b><span>梦想集团</span></li>
                <li><b>建设负责人</b><span>林飞扬</span></li>
                <li><b>最近维护时间</b><span>7.28</span></li>
                <li><b>下次维护时间</b><span>11.25</span></li>
                <li><b>联系方式</b><span>1385552548844</span></li>-->
            </ul>
            <div class="notes">
                <p>备注</p>
                <textarea rows="20" cols="200">
                </textarea>
            </div>
        </div>
    </div>
    <script>
        function csj() {
            var ui = document.getElementById("ui");
            var leibie = window.localStorage.getItem('leibie');
            var liObj1 = document.createElement("li");
            var iClose = document.getElementsByClassName("hande_close")[0];
            //设置li中的文字
            liObj1.innerHTML = "<b>类别</b><span>" + leibie + "</span>";
            //将li追加到ul中
            ui.appendChild(liObj1);
            var zlm = window.localStorage.getItem('zlm');
            var liObj2 = document.createElement("li");
            //设置li中的文字
            liObj2.innerHTML = "<b>族名称</b><span>" + zlm + "</span>";
            //将li追加到ul中
            ui.appendChild(liObj2);
            var lxmc = window.localStorage.getItem('lxmc');
            var liObj2 = document.createElement("li");
            //设置li中的文字
            liObj2.innerHTML = "<b>类型名称</b><span>" + lxmc + "</span>";
            //将li追加到ul中
            ui.appendChild(liObj2);

            iClose.click(function () {
               window.external.loadMainWebFunc("detailData", ''); 
            })
            
        }
    </script>
</body>

</html>